<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS3登录注册切换动画模板 - 站长素材</title>

    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="materialContainer">
    <div class="box">
        <div class="title">登录</div>
        <div class="input">
            <label for="name">用户名</label>
            <input type="text" name="name" id="name">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="password">密码</label>
            <input type="password" name="password" id="password">
            <span class="spin"></span>
        </div>
        <div class="button login">
            <button id="loginBtn">
                <span>登录</span>
                <i class="fa fa-check"></i>
            </button>
        </div>
        <a href="javascript:" class="pass-forgot">忘记密码？</a>
    </div>

    <div class="overbox">
        <div class="material-button alt-2">
            <span class="shape"></span>
        </div>
        <div class="title">注册</div>
        <div class="input">
            <label for="regname">用户名</label>
            <input type="text" name="regname" id="regname">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="regpassword">密码</label>
            <input type="password" name="regpassword" id="regpassword">
            <span class="spin"></span>
        </div>
        <div class="input">
            <label for="reregpass">确认密码</label>
            <input type="password" name="reregpass" id="reregpass">
            <span class="spin"></span>
        </div>
        <div class="button">
            <button id="enrollBtn">
                <span>注册</span>
            </button>
        </div>
    </div>

</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/index.js"></script>

<script>
    var loginBtn = document.getElementById('loginBtn');
    loginBtn.addEventListener('click',login);
    function login() {
        $.ajax({
            type: "post",
            url: "/user/login",
            data: {
                name: $("#name").val(),
                password: $("#password").val()
            },
            success: function (result) {
                console.log(result);
                if (result.code == 200 && result.data != null) {
                    window.localStorage.setItem("user_token",result.data);
                    window.location.href="blog_list.html";
                }else {
                    $("#name").val("");
                    $("#password").val("");
                    alert("账户或者密码错误");
                }
            }
        });
    }

    var enrollBtn = document.getElementById('enrollBtn');
    enrollBtn.addEventListener('click',enroll);

    function enroll() {
        $.ajax({
            type: "post",
            url: "/user/registry",
            data: {
                name: $("#regname").val(),
                password: $("#regpassword").val(),
                repassword: $("#reregpass").val()
            },
            success: function (result) {
                //对返回值进行约定：
                //返回1表示注册成功
                //返回0表示账号已存在
                //返回-1则表示用户输入的用户名或者密码不合理
                //返回-2则表示注册失败，内部错误
                if (result.code == 200 && result.data != null) {
                    var ret = result.data;
                    if (ret == 1) {
                        alert("注册成功");
                        window.location.href="blog_login.html";
                    }else if (ret == 0) {
                        alert("此账号已存在，请登录");
                        window.location.href="blog_login.html";
                    }else {
                        alert(result.errMsg);
                    }
                }
            }
        });
    }
</script>

</body>
</html>